<template>
	<view class="Selling">
		<statusBar />
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-编辑-售卖时间</view>
		</view>
		<view class="search">
			
			<view>
				<view class="sousuo" @tap="Add('1')">
					<view>全时段售卖</view>
					<image v-if="isTrue" src="../../static/management/gouxuan.png" mode=""></image>
				</view>
				<view class="sousuo" @tap="Add('2')">
					<view>限时售卖</view>
					<image v-if="isFalse" src="../../static/management/gouxuan.png" mode=""></image>
				</view>
			</view>

			<!-- 售卖日期 -->
			<view v-if="currey == 2">
				<view>售卖日期</view>
				<!-- 日期 -->
				<view class="dataTime">
					<view>开始日期</view>
					<view @tap="timeStatus('1')">{{TimeDay}}</view>
				</view>
				<view class="dataTime">
					<view>结束日期</view>
					<view @tap="timeStatus('2')">{{TimeDate}}</view>
				</view>
				<!-- 售卖日 -->
				<view class="SellingDate">
					<view>售卖日</view>
					<view class="sell">
						<view v-for="(item,index) in list" :key="index" @click="changeSpan(index,item.name);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}">
							<view class="wenzi">{{item.name}}</view>
							<view class="vimg"></view>
						</view>
					</view>
				</view> 
			</view>
		</view>
		<!-- 开始 -->
        <u-picker mode="time" v-model="start" :params="params" @confirm="confirm"></u-picker>
		<!-- 结束日期时间选择 -->
		<u-picker mode="time" v-model="end" :params="params" @confirm="confirm1"></u-picker>
		
	
	</view>
</template>
<script>
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			spanIndex:[],
			list:[
				{name:"周一"},
				{name:"周二"},
				{name:"周三"},
				{name:"周四"},
				{name:"周五"},
				{name:"周六"},
				{name:"周日"},
			],
			isTrue: true,
			isFalse: false,
			currey: '',
			start: false,//开始时间
			end:false,//结束时间
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			TimeDay:"请选择",//开始
			TimeDate:"请选择",//结束
			type:"",
			name:""
			
		};
	},
	components: {
		statusBar
	},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		Add(index) {
			this.currey = index;
			if (this.currey == 1) {
				this.isTrue = true;
				this.isFalse = false;
			} else {
				this.isTrue = false;
				this.isFalse = true;
			}
		},
		timeStatus(index) {
			this.type = index
			if(this.type==1){
				this.start = true
			}else if(this.type==2){
				this.end = true
			}
			
		},
		// 开始时间
		confirm(e){
			this.TimeDay = '';
			
				if (this.params.year) this.TimeDay += e.year + '年';
				if (this.params.month) this.TimeDay += e.month +　'月';
				if (this.params.day) this.TimeDay += e.day + '日';
			    console.log(this.TimeDay,22222)
		},
		// 结束时间
		confirm1(e) {
			// console.log(e);
			this.TimeDate = '';
			
				if (this.params.year) this.TimeDate += e.year + '年';
				if (this.params.month) this.TimeDate += e.month +　'月';
				if (this.params.day) this.TimeDate += e.day + '日';
			    console.log(this.TimeDate,22222)
			
		},
		
		changeSpan(index,name){
		      
		      let arrIndex = this.spanIndex.indexOf(index);
			 
		      console.log(arrIndex);

		      if(arrIndex>-1){
		          this.spanIndex.splice(arrIndex,1);
		      }else{
		          this.spanIndex.push(index);
		      }
		  },
	}
};
</script>
<style lang="scss" scoped>
.Selling {
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 30upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		border-bottom: 1upx solid #edf0fa;
		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.search {
		// 微信小程序
		/* #ifdef  MP-WEIXIN */

		padding-top: 100upx;
		/* #endif */
		// 手机端
		/* #ifdef APP-PLUS */
		padding-top: 100upx;
		/* #endif */
		// H5端
		/* #ifdef  H5 */
		padding-top: 150upx;
		/* #endif */
		& > view:nth-child(1) {
			background: #ffffff;
			.sousuo {
				width: 93%;
				margin: 0 auto;
				padding: 35upx 0upx 35upx 0upx;
				border-bottom: 1upx solid #edf0fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
				& > view:nth-child(1) {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}

				image {
					width: 48upx;
					height: 48upx;
					display: flex;
				}
			}
		}

		& > view:nth-child(2) {
			& > view:nth-child(1) {
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				border-bottom: 1upx solid #edf0fa;
				padding: 44upx 31upx 25upx;
			}
			.dataTime {
				border-bottom: 1upx solid #edf0fa;
				padding: 44upx 31upx 25upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #ffffff;
			}
		}
		.SellingDate{
			border-bottom: 1upx solid #edf0fa;
			padding: 44upx 31upx 25upx;
			background: #FFFFFF;
			&>view:nth-child(1){
				font-size:32upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
			.sell{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				width: 100%;
				&>view{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					width: 20%;
					padding-top: 32upx;
					position: relative;
					
					.wenzi{
						width:104upx;
						height:56upx;
						
						border:2upx solid rgba(221,221,221,1);
						border-radius:2upx;
						font-size:28upx;
						font-family:Source Han Sans CN;
						font-weight:400;
						color:#DDDDDD;
						display: flex;
						align-items: center;
						justify-content: center;
						
						
					}
					
					
				}
				.bgcolor{
					.wenzi{
						color: #35394C!important;
						border: 2upx solid #35394C;
					}
					.vimg{
						background: url(../../static/management/beij.png)no-repeat;
						background-size: 100%100%;
						width: 25upx;
						height: 25upx;
						position: absolute;
						bottom: 0;
						right: 38upx;
					}
				}
			}
		}
	}
}
</style>
